<template>
    <div>
        <HeaderView :class="{ 'sticky': isSticky }"></HeaderView>
        <div>
            <div class="header">
                <!-- <img src="https://course.myhope365.com/img/index-top-bg.564836d0.png" alt="" width="100%" height="295px"> -->
                <div class="header-img">
                    <img src="https://course.myhope365.com/img/logo-text.321d0dc2.png" alt="">
                </div>
                <div class="header-top">
                    <div class="header-nav">
                        <div class="header-top-1">
                            <div class="header-top-nav">
                                <ul>
                                    <li>
                                        <a href="#">首页</a>
                                    </li>
                                    <li>
                                        <!-- <router-link  to="/search" target="_blank"> -->
                                        <a href="#">课程分类</a>
                                        <!-- </router-link> -->
                                    </li>
                                    <li>
                                        <a href="#"> 教学管理云平台</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="header-span">
                                <div class="header-span-1">
                                    <input type="text" v-model="searchKeyword" placeholder="搜索课程~">
                                    <button class="header-span-btn" @click="handleSearch">
                                        <!-- <router-link  to="/search" target="_blank"> -->
                                        <img src="../image/搜索 (1).png" alt="" width="35px" height="35px">
                                        <!-- </router-link> -->
                                    </button>
                                </div>
                            </div>
                            <div class="header-right">
                                <div class="login-box">
                                    <div class="car" @click="goToCart">
                                        <img src=""
                                            alt="">
                                    </div>
                                    <div class="user">
                                        <div class="user-top">开通VIP免费观看全站视频</div>
                                        <LoginView1></LoginView1>
                                        <!-- <div class="user-login btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">登录/注册</div>
                                        <div class="modal" id="myModal">
                                            <div class="modal-dialog">
                                              <div class="modal-content">
                                                <button class="ant-modal-close"></button>
                                                <div class="ant-modal-body">
                                                    <div class="login-modal">
                                                        <ul>
                                                            <li>普通登录</li>
                                                            <li>手机登录</li>
                                                        </ul>
                                                        <form class="login-form">
                                                            <div class="ant-form-item">
                                                                <input type="text" placeholder="请输入账户名">
                                                            </div>
                                                            <div class="ant-form-item">
                                                                <input type="password" placeholder="请输入密码">
                                                            </div>
                                                            <div class="login-form-action">
                                                                <button type="submit">登录</button>
                                                                <a href="#" class="a-1" data-bs-toggle="modal" data-bs-target="#registerModal">忘记密码? </a>
                                                                <a href="#" class="a-2" data-bs-toggle="modal" data-bs-target="#registerModal">立即注册!</a>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                              </div>
                                            </div>
                                        </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 手机注册模态框 -->
                <div class="modal" id="registerModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <button class="ant-modal-close"></button>
                            <div class="ant-modal-body">
                                <div class="register-modal">
                                    <div class=" register-title">普通注册</div>
                                    <form class="register-form">
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">账户名:</div>
                                            <div class="ant-col-sm-18 "><input type="user"
                                                    placeholder="请输入账户名(6-20位，非纯数字)!"></div>
                                        </div>
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">密码:</div>
                                            <div class="ant-col-sm-18 "><input type="password"
                                                    placeholder="请输入你的密码(6-20位，非汉字)!"></div>
                                        </div>
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">确认密码:</div>
                                            <div class="ant-col-sm-18 "><input type="password" placeholder="请再次输入你的密码!">
                                            </div>
                                        </div>
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">昵称:</div>
                                            <div class="ant-col-sm-18 "><input type="text" placeholder="请输入你的昵称!"></div>
                                        </div>
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">手机号:</div>
                                            <div class="ant-input-group">
                                                <div class="ant-input-group-addon">+86</div>
                                                <div class="ant-col-sm-18  ant-col-sm-24"><input type="text"
                                                        placeholder="请输入你的手机号"></div>
                                            </div>
                                        </div>
                                        <div class="ant-form-item">
                                            <div class="ant-col-sm-6 ">验证码:</div>
                                            <div class="input-1"><input type="text" placeholder="请输入验证码"></div>
                                            <button type="button" class="btn-1">获取验证码</button>
                                        </div>
                                        <div class="register-form-action">
                                            <button type="submit">注册</button>
                                        </div>
                                        <div class="end">
                                            <span>去登陆</span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="section">
            <SwiperTest></SwiperTest>
            <!-- vip -->
            <div class="vip-box">
                <img src=" "
                    alt="">
                <span>仅需198即可观看所有付费课程</span>
                <button>开通VIP</button>
            </div>
            <!-- 直播课程 -->
            <div class="live-box">
                <div class="ant-col">
                    <div class="online-left">
                        <div class="first-line">
                            <div class="title-box">
                                <img src=""
                                    alt="">
                                <div class="title-1">直播课程</div>
                                <div class="title-2">互联网大佬在线直播</div>
                            </div>
                            <div class="live-next-last-box">
                                <img src=""
                                    alt="">
                                <img src=""
                                    alt="">
                            </div>
                        </div>
                        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png"
                                                alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>

                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png"
                                                alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png"
                                                alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png"
                                                alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>

                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div>
                            <div class="ant-row">
                                <div class="ant-coll">
                                    <div class="live-content-box">
                                        <div class="img-box">
                                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                                        </div>
                                        <div class="text-box"> 求职技巧之重难点问题剖析与解决 </div>
                                        <div class="end-box">直播结束</div>
                                    </div>
                                </div>
                            </div> -->
                    </div>
                </div>
                <div class="ant-col-1">
                    <div class="online-right">
                        <div class="title-box">
                            <img src=""
                                alt="">
                            <div style="font-weight: 600;font-size: 26px;color: #333;">课程榜单</div>
                            <div style="margin-top: auto;
                                margin-bottom: 5px;
                                font-size: 14px;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                color: #9f9f9f;">以购买、学习相关数据为依据～每日更新</div>
                        </div>
                        <div class="content-box">
                            <img src="https://course.myhope365.com/img/bestseller-list.23c00d98.png " alt=""
                                style="    width: 140px;     margin-top: -40px;">
                            <div class="course-box">
                                <div class="content-img">
                                    <div class="left-num">NO.1</div>
                                    <div class="img-box">
                                        <img src="https://oos-hazz.ctyunapi.cn/online-course/求职成功之道与术_1-1227885610962780160.jpg"
                                            alt="">
                                    </div>
                                    <div class="title-price-box">
                                        <div> 求职成功之道与术 </div>
                                        <div> ¥800 </div>
                                        <div>652 人报名 </div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-box">
                                <div class="content-img">
                                    <div class="left-num">NO.1</div>
                                    <div class="img-box">
                                        <img src="https://oos-hazz.ctyunapi.cn/online-course/求职成功之道与术_1-1227885610962780160.jpg"
                                            alt="">
                                    </div>
                                    <div class="title-price-box">
                                        <div> 求职成功之道与术 </div>
                                        <div> ¥800 </div>
                                        <div>652 人报名 </div>
                                    </div>
                                </div>
                            </div>
                            <div class="course-box">
                                <div class="content-img">
                                    <div class="left-num">NO.1</div>
                                    <div class="img-box">
                                        <img src="https://oos-hazz.ctyunapi.cn/online-course/求职成功之道与术_1-1227885610962780160.jpg"
                                            alt="">
                                    </div>
                                    <div class="title-price-box">
                                        <div> 求职成功之道与术 </div>
                                        <div> ¥800 </div>
                                        <div>652 人报名 </div>
                                    </div>
                                </div>
                            </div>
                            <button class="change-box">换一换</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 课程分类 -->
            <div class="container_1">
                <div class="container_list">
                    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
                        <header>
                            <img src=""
                                alt="" class="title-icon">
                            <span class="title-course"> 免费课程</span>
                            <!-- <img src="	https://course.myhope365.com/img/vip-free.aa229615.png" alt="" class="vip-free"> -->
                            <span class="more-course">
                                <a href="#">更多</a>
                            </span>
                        </header>
                        <div class="container_bottom_1">
                            <CourseView type="free" :pageSize="5"></CourseView>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container_2">
                <div class="container_list">
                    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
                        <header>
                            <img src="https://course.myhope365.com/img/boutique-icon.6d982741.png" alt=""
                                class="title-icon">
                            <span class="title-course"> 精品课程</span>
                            <img src="	https://course.myhope365.com/img/vip-free.aa229615.png" alt="" class="vip-free">
                            <span class="more-course">
                                <a href="#">更多</a>
                            </span>
                        </header>
                        <div class="container_bottom_2">
                            <CourseView type="boutique" :pageSize="5"></CourseView>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container_3">
                <div class="container_list">
                    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
                        <header>
                            <img src="	https://course.myhope365.com/img/time-limit-icon.12673615.png" alt=""
                                class="title-icon">
                            <span class="title-course"> 限时折扣课程</span>
                            <img src="	https://course.myhope365.com/img/vip-free.aa229615.png" alt="" class="vip-free">
                            <span class="more-course">
                                <a href="#">更多</a>
                            </span>
                        </header>
                        <div class="container_bottom_3">
                            <CourseView type="discount" :pageSize="5"></CourseView>

                        </div>
                    </div>
                </div>
            </div>
            <div class="container_4" style="height:280px">
                <div class="container_list" style="height: 280px;">
                    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
                        <header>
                            <img src=""
                                alt="" class="title-icon">
                            <span class="title-course"> 头条精选</span>
                            <!-- <img src="	https://course.myhope365.com/img/vip-free.aa229615.png" alt="" class="vip-free"> -->
                            <span class="more-course">
                                <a href="#">更多</a>
                            </span>
                        </header>
                        <div class="container_bottom_4">
                            <div class="course-container">
                                <div class="col">
                                    <div style="margin-bottom: 10px;">
                                        <a href="#">
                                            <div class="course-cover">
                                                <div class="img-box">
                                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/lQLPJwmS77iVarjMyM0BSrCqUh-BovoV1wO5jTZpgA4A_330_200-1613081163121819648.png"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div class="course-cover-1">
                                                <div class="classList-introduce"> 接口测试及实战 </div>
                                                <!-- <div class="classList-person">
                                                共23节课|88人报名
                                            </div>
                                            <div class="classList-price">
                                                <span class="price-span"> ￥89.9 </span>
                                                <span class="old-price"> ￥799</span>
                                                <span  class="discount-desc ant-tag ant-tag-orange"></span>
                                            </div> -->
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col">
                                    <div style="margin-bottom: 10px;">
                                        <a href="#">
                                            <div class="course-cover">
                                                <div class="img-box">
                                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/lQLPJwmS77iVarjMyM0BSrCqUh-BovoV1wO5jTZpgA4A_330_200-1613081163121819648.png"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div class="course-cover-1">
                                                <div class="classList-introduce"> 接口测试及实战 </div>
                                                <!-- <div class="classList-person">
                                                共23节课|88人报名
                                            </div>
                                            <div class="classList-price">
                                                <span class="price-span"> ￥89.9 </span>
                                                <span class="old-price"> ￥799</span>
                                                <span  class="discount-desc ant-tag ant-tag-orange"></span>
                                            </div> -->
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col">
                                    <div style="margin-bottom: 10px;">
                                        <a href="#">
                                            <div class="course-cover">
                                                <div class="img-box">
                                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/lQLPJwmS77iVarjMyM0BSrCqUh-BovoV1wO5jTZpgA4A_330_200-1613081163121819648.png"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div class="course-cover-1">
                                                <div class="classList-introduce"> 接口测试及实战 </div>
                                                <!-- <div class="classList-person">
                                                共23节课|88人报名
                                            </div>
                                            <div class="classList-price">
                                                <span class="price-span"> ￥89.9 </span>
                                                <span class="old-price"> ￥799</span>
                                                <span  class="discount-desc ant-tag ant-tag-orange"></span>
                                            </div> -->
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col">
                                    <div style="margin-bottom: 10px;">
                                        <a href="#">
                                            <div class="course-cover">
                                                <div class="img-box">
                                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/lQLPJwmS77iVarjMyM0BSrCqUh-BovoV1wO5jTZpgA4A_330_200-1613081163121819648.png"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div class="course-cover-1">
                                                <div class="classList-introduce"> 接口测试及实战 </div>
                                                <!-- <div class="classList-person">
                                                共23节课|88人报名
                                            </div>
                                            <div class="classList-price">
                                                <span class="price-span"> ￥89.9 </span>
                                                <span class="old-price"> ￥799</span>
                                                <span  class="discount-desc ant-tag ant-tag-orange"></span>
                                            </div> -->
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <div class="col">
                                    <div style="margin-bottom: 10px;">
                                        <a href="#">
                                            <div class="course-cover">
                                                <div class="img-box">
                                                    <img src="https://oos-hazz.ctyunapi.cn/online-course/lQLPJwmS77iVarjMyM0BSrCqUh-BovoV1wO5jTZpgA4A_330_200-1613081163121819648.png"
                                                        alt="">
                                                </div>
                                            </div>
                                            <div class="course-cover-1">
                                                <div class="classList-introduce"> 接口测试及实战 </div>
                                                <!-- <div class="classList-person">
                                                共23节课|88人报名
                                            </div>
                                            <div class="classList-price">
                                                <span class="price-span"> ￥89.9 </span>
                                                <span class="old-price"> ￥799</span>
                                                <span  class="discount-desc ant-tag ant-tag-orange"></span>
                                            </div> -->
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!--  -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <FooterView />

    </div>
</template>

<script>
import FooterView from '@/components/footerView.vue';
import SwiperTest from '@/components/SwiperTest.vue';
import CourseView from '@/components/courseView.vue';
import LoginView1 from '@/login/loginView1.vue';
import HeaderView from '@/detail/component/headerView.vue';



export default {
    name: 'HomeView',
    components: {
        SwiperTest,
        FooterView,
        CourseView,
        LoginView1,
        HeaderView,
    },
    data() {
        return {
            swiperList: [],
            searchKeyword: '',
            isSticky: false,
            // 设定触发固定定位的滚动距离
            stickyOffset: 100
        }
    },
    mounted() {
        // 挂载时添加滚动监听
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        // 组件销毁前移除滚动监听，避免内存泄漏
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        handleSearch() {
            if (this.searchKeyword.trim()) {
                // 携带关键字跳转到搜索页
                this.$router.push({
                    path: '/search',
                    query: {
                        keyword: this.searchKeyword.trim()
                    }
                })
            }
        },
        goToCart() {
            window.open('/car', '_blank');
        },
        handleScroll() {
            // 获取当前滚动距离
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop
            // 根据滚动距离切换 isSticky 状态
            this.isSticky = scrollTop > this.stickyOffset
        }
    },
    created() {

    }
}
</script>
<style scoped lang="scss">
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; // 确保头部显示在最上层
}
</style>
